<template>
  <div class="detail ace">
    <NavItem  class="NavItem NavItemNew" :class="type != 1 ? '' : ''" />

    <el-main  class="main-top asdsa"  >
      <el-row type="flex" justify="space-between" class="title_pns">
        <el-col :xl="24" class="tio" v-if="desc">
          <span class="v_span">{{ desc.pns }}</span>
          <span class="v_span2">{{ desc.tio }}</span>
        </el-col>
        <el-col :push="2" class="icon-tog mb" :xs="10">
          <i @click="show = true" class="iconfont icon-toggle"></i>
        </el-col>
        <el-col class="d_btn pc" style="text-align: right">
          <el-button
            @click="copy"
            :data-clipboard-text="record"
            id="express_info_right"
            icon="iconfont icon-fenxiang"
          >
            分享该专利
          </el-button>
          <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()"
            >下载专利文件</el-button
          >
        </el-col>
      </el-row>
      <el-row class="infos" :gutter="10">
        <el-col :xl="11" :md="15">
          <div class="detail_info">
            <div class="detail_info_first_box">
              <el-descriptions :column="1" border style="width: 405px">
                <el-descriptions-item label="法律状态/事件">
                  <div class="detail_info_last">
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#4ba22f"
                      v-if="desc.status == '授权'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#4ba22f"
                      v-if="desc.status == '部分无效'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#4ba22f"
                      v-if="desc.status == '权利恢复'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#6c778b"
                      v-if="desc.status == '未缴年费'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#6c778b"
                      v-if="desc.status == '撤回'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#6c778b"
                      v-if="desc.status == '驳回'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#6c778b"
                      v-if="desc.status == '期限届满'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#6c778b"
                      v-if="desc.status == '避重授权'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#6c778b"
                      v-if="desc.status == '全部撤销'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#da7b21"
                      v-if="desc.status == '实质审查'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <el-tag
                      style="border: none"
                      size="small"
                      effect="dark"
                      color="#da7b21"
                      v-if="desc.status == '公开'"
                    >
                      {{ desc.status }}
                    </el-tag>
                    <div v-if="desc.status == '暂无数据' || desc.status == ''">
                      暂无数据
                    </div>
                    <el-tag
                      style="
                        height: 25px;
                        line-height: 25px;
                        margin-right: 5px;
                        margin-bottom: 5px;
                      "
                      size="small"
                      v-for="(t, s) in desc.event"
                      :key="s"
                      v-if="desc.event.length > 0"
                      effect="plain"
                      type
                      >{{ t }}
                    </el-tag>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="申请号">{{ desc.ano }}</el-descriptions-item>
                <el-descriptions-item label="申请日">{{ desc.ad }}</el-descriptions-item>
                <el-descriptions-item label="公开（公告）号">
                  <div>{{ desc.pns }}</div>
                  <!-- <div style="color: #3377ff;" @click="getintro('PIDCNA0202206070000000011459416681U09Q4011451')">{{ desc.pns }}</div> -->
                </el-descriptions-item>
                <el-descriptions-item label="公开（公告）日">{{
                  desc.pd
                }}</el-descriptions-item>
                <el-descriptions-item label="授权日">{{ desc.sq }}</el-descriptions-item>
                <el-descriptions-item label="预估到期日">{{
                  desc.rd
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="img-box">
              <div class="demo-image__preview">
                <el-image class="img" fit="contain" :src="desc.imgo"></el-image>
              </div>

              <br />
            </div>
          </div>
        </el-col>
        <el-col :md="6">
          <p class="context mb_zy" style="margin-bottom: 20px; font-weight: 700">
            {{ desc.is_loc == "0" ? "摘要" : "摘要说明" }}
          </p>
          <p v-html="desc.desc" style="line-height: 1.8" class="context"></p>
        </el-col>
      </el-row>
      <el-row class="mb_top top_line" :gutter="10">
        <el-col :xl="10" :md="13">
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">当前申请(专利权)人</div>
            <div class="abst__layout-text context" v-html="desc.aspc"></div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">原始申请(专利权)人</div>
            <div class="abst__layout-text context" v-html="desc.aspo"></div>
          </div>
          <div class="abst__layout-row" v-if="desc.is_loc == '0'">
            <div class="abst__layout-label context mb_context">IPC分类号</div>
            <div class="abst__layout-text context">{{ desc.ipc }}</div>
          </div>
          <div class="abst__layout-row" v-if="desc.is_loc == '1'">
            <div class="abst__layout-label context mb_context">LOC分类号</div>
            <div class="abst__layout-text context">{{ desc.loc }}</div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">发明人</div>
            <div class="abst__layout-text context">{{ desc.ino }}</div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">代理机构</div>
            <div class="abst__layout-text context">{{ desc.agc }}</div>
          </div>
          <div class="abst__layout-row">
            <div class="abst__layout-label context mb_context">代理人</div>
            <div class="abst__layout-text context">{{ desc.ag }}</div>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <div v-show="show" class="transition-box mb">
      <transition name="el-fade-in">
        <div v-show="show" class="el-zoom-in-top">
          <p @click="show = false" class="close">
            <i class="iconfont icon-guanbi"></i>
          </p>
          <ul class="mb_nav_li">
            <li @click="show = false">
              <router-link to="/detail">摘要</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/power">权利要求</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/instructions">说明书</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/drawings">附图</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/fullText">全文</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/kindred">同族信息</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/law">法律信息</router-link>
            </li>
          </ul>
          <el-row class="mt_btn" style="margin: 0 10px">
            <el-button
              @click="copy"
              id="express_info_right"
              :data-clipboard-text="record"
              type="warning"
              >分享该专利
            </el-button>
            <el-button
              icon="iconfont icon-lanmuyeicon_pdfxiazai"
              @click="dow()"
              type="primary"
              >下载专利文件
            </el-button>
          </el-row>
        </div>
      </transition>
    </div>
    <!-- <rightMenu @moveTo="moveTo" /> -->
    <QRCode
      v-if="QRCodeVisible"
      :text="record"
      :desc="desc"
      :dialogVisible="QRCodeVisible"
      @val="val"
    />
  </div>
</template>

<script>
import { detail } from "@/api";
import { catalog_handle, download } from "@/api/configApi";
import Breadcrumb from "@/components/Breadcrumb";
import NavItem from "@/components/Navitem";
import QRCode from "@/components/QRCode";
import rightMenu from "@/components/web/rightMenu";
import { VUE_APP_BASE_API, PAGE_BASE_URL } from "@/config";
import { setShare } from "@/wechat";
import Service from "@/components/Service";
import "element-ui/lib/theme-chalk/base.css";
import Header_h from "@/components/Header_h";
import Header from "@/components/Header";
import Navbar from "@/layout/components/Navbar.vue";
import Footer from "@/components/Footer";
import { getToken } from "@/utils/auth";

export default {
  props: {
    value1: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Breadcrumb,
    NavItem,
    Service,
    rightMenu,
    QRCode,
    Header_h,
    Header,
    Footer,
    Navbar,
  },
  data() {
    return {
      QRCodeVisible: false,
      dialogVisible: true,
      activeName: "first",
      desc: [],
      url: "",
      name: "",
      path: "",
      show: false,
      pid: "",
      record: "",
      roeve: "",
      type: sessionStorage.getItem("type"),
      token: getToken(),
      share: this.$route.query.type,
      pc: this.$route.query.pc ? this.$route.query.pc : sessionStorage.getItem("pc") || 0,
      preview: false,
    };
  },
  created() {
    if (this.$route.query.pid) {
      sessionStorage.setItem("pid", this.$route.query.pid);
    }
    if (Number(this.$route.query.preview)) {
      console.log("进入",this.$route.query);
      this.preview = true;
    }
    this.pid = this.$route.query.pid;
    let pc;
    if (this.$store.getters.token) {
      pc = 0;
    } else {
      pc = 1;
    }
    this.record =
      window.location.origin +
      "#/detail?pid=" +
      (this.pid ? this.pid : sessionStorage.getItem("pid")) +
      "&preview=1";

    this.roeve = this.$route.path;
    if (this.$route.query.pid) {
      sessionStorage.setItem("pid", this.$route.query.pid);
    }

    if (this.$route.query.pc) {
      sessionStorage.setItem("pc", this.$route.query.pc);
    } else {
      sessionStorage.setItem("pc", 0);
    }
  },
  beforeDestroy() {
    document.title = "知识产权智慧管理平台";
  },
  computed: {},
  async mounted() {
    try {
      if (this.$route.query.type) {
        this.type = this.$route.query.type;
        sessionStorage.setItem("type", this.$route.query.type);
      } else {
      }
      this.url = sessionStorage.getItem("url");

      this.path = sessionStorage.getItem("path");
      this.name = sessionStorage.getItem("name");
      const pid = sessionStorage.getItem("pid");
      let list = await catalog_handle({
        pid: pid,
        lang: "o",
        type: 1,
      });
      this.desc = list.list;
      const desc = `知识产权智慧管理平台`;
      const title = `[顺企中心]${this.desc.tio}-${this.desc.ano}`;
      document.title = title;
      setTimeout(() => {
        setShare({
          title, // 分享标题
          desc,
        });
      }, 1000);
    } catch (e) {
      this.$message(e.message);
    }
  },
  methods: {
    moveTo() {
      window.scrollTo(0, 0);
    },
    val(val) {
      this.QRCodeVisible = val;
    },
    contactus(val) {
      this.dialogVisible = val;
    },
    closeVisible(val) {
      this.dialogVisible = val;
    },
    async dow() {
      try {
        const pid = sessionStorage.getItem("pid");
        download({
          pid: pid,
        }).then((res) => {
          if (res.list[0].nginxPath == "The result is empty") {
            this.$message({
              message: "专利文件为空",
              type: "warning",
            });
          } else {
            window.open('https://' + res.list[0].nginxPath,"_blank");
          }
        });
      } catch (e) {
        this.$message(e.message);
      }
    },
    copy() {
      this.show = false;
      let clipboard = new this.clipboard("#express_info_right");
      let that = this;
      clipboard.on("success", function () {
        //
        that.QRCodeVisible = true;
        clipboard.destroy();
      });
      clipboard.on("error", function () {
        that.$message.error("复制失败");
      });
    },
    async getintro(pid) {
      sessionStorage.setItem("pid", pid);
      let list = await catalog_handle({
        pid: pid,
        lang: "o",
        type: 1,
      });
      this.desc = list.list;
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: none;
  background: none;
  padding: 0 0 12px 0;
}

::v-deep tbody tr th {
  width: 205px;
  font-size: 14px;
  color: rgba(31, 46, 76, 1) !important;
  margin: 20px 0;
  vertical-align: middle;
}

.detail_large {
  margin-bottom: 44px;
}

.detail {
  position: relative;
}

.navitems {
  top: 10% !important;
}

.CN {
  font-size: 18px;
  font-weight: 400;
  color: rgba(42, 139, 45, 1);
  display: inline-block;
}

.title {
  font-size: 18px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  display: inline-block;
  margin-left: 20px;
}

.detail_info {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  // border-bottom:4px solid #eee;
}

.detail_info_title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  margin: 20px 0;
}

.detail_info_last {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  // margin: 20px 64px;
}

.img-box {
  width: 188px;
  // height:237px;
  border: 1px solid rgba(230, 233, 240, 1);
  border-radius: 5px;
  text-align: center;

  .img {
    width: 133px;
    height: 193px;
    object-fit: cover;
    margin: 10px 0;
  }
}

.detail_info_first_box {
  display: flex;
  align-items: center;
  // margin-bottom: 60px;
}

.tips {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  display: block;
  margin: 10px 0;
}

.detail_head_title {
  width: 143px;
}

.detail_info_patent {
  // height:50px;
  // margin:0 0 22px 0;
  margin-bottom: 20px;
  margin-left: 64px;
  // width: 480px;
}

.detail_head_context {
  width: 143px;
  margin-bottom: 20px;
}

.v_span {
  font-size: 18px;
  font-weight: 400;
  color: rgba(42, 139, 45, 1);
}

.v_span2 {
  font-size: 18px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  padding-left: 20px;
}

.infos {
  margin-top: 37px;
}

.Breadcrumbs_top {
  margin-top: 0;
}
.abst__layout-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;

  .abst__layout-label {
    width: 190px;
    margin-right: 20px;
    text-align: left;
    padding-bottom: 15px;
  }

  .abst__layout-text {
    width: 100%;
    text-align: left;
  }
}

.tio {
  line-height: 2.2;
}

.title_pns {
  border-bottom: 1px solid #c8d0dc;
  padding-bottom: 20px;
}

.pc {
  display: block;
}

.mb {
  display: none;
}

.asdsa {
  // margin-top: 0 !important;
}

.two {
  width: 100% !important;
  margin-left: 0 !important;
  .two_box {
    display: flex;
    gap: 20px !important;
  }
}


.main-top {
  margin-top: 0;
  margin-left: 150px !important;
}

.NavItemNew {
    position: absolute;
    width: 160px;
  }

@media (max-width: 750px) {
  .main-top {
    padding-top: 60px;
    margin-top: 0;
  }

  .navbar {
    display: none;
  }

  .abst__layout-label {
    border-bottom: 1px solid #dbdbdb;
  }

  .detail_info {
    border-bottom: 4px solid #dbdbdb;
  }

  .v_span2 {
    display: block;
  }

  .mb_zy {
    margin-bottom: 10px !important;
  }

  .Breadcrumbs,
  .NavItem,
  .Header,
  .service {
    display: none;
  }

 

  .main-top {
    width: 100%;
    margin-left: 0 !important;
    padding-bottom: 0;
    // padding-top: 60px;
    top: 0;
  }

  .pc {
    display: none;
  }

  .mb {
    display: block;
  }

  .detail_info_title {
    margin: 15px 0;
  }

  ::v-deep tbody tr th {
    margin: 15px 0;
  }

  .detail_info_last {
    margin: 15px 0;
  }

  .infos {
    margin: 10px 0 0 0;
  }

  .detail_info {
    margin-bottom: 30px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    width: 100%;
  }

  .detail_info_first_box {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }

  .detail_head_title {
    width: auto;
  }

  .img-box {
    width: 100%;
  }

  .abst__layout-row {
    flex-direction: column;
  }

  .mb_top {
    margin-top: 20px;
  }

  .top_line {
    border-top: 4px solid #eee;
    padding-top: 20px;
  }

  .mb_context {
    font-weight: bold;
    margin-bottom: 10px;
    width: 100% !important;
  }

  .v_span2 {
    padding-left: 0;
  }

  .tio {
    line-height: 1.3;
  }

  .icon-tog {
    text-align: center;
    display: inline-block;
    line-height: 46px;
  }

  .icon-toggle {
    font-size: 25px !important;
  }

  .title_pns {
    border-bottom: 1px solid #c8d0dc;
    padding-bottom: 10px;
  }

  .transition-box {
    position: fixed;
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .el-zoom-in-top {
    position: fixed;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-color: #fff;
    top: 0;
    right: 0;
    z-index: 10;
  }

  .mb_nav_li {
    margin: 60px auto 0;
  }

  .mb_nav_li li {
    // margin-top:20px;
    padding: 20px 15px;
    border-bottom: 1px solid #ddd;
  }

  .close {
    float: right;
    // padding: 10px;
    margin-top: 25px;
    margin-right: 25px;

    .iconfont {
      font-size: 22px;
    }
  }

  .mt_btn {
    margin-top: 30px !important;
  }

  .asdsa {
    padding-top: 20px;
  }
}
</style>
